1-4. ＨＴＭＬコンテンツの記述 '96〜 (1) HTML の超基本 * HTML ファイルを表示する HTML のタグは大文字、小文字どちらでも構わない。HTML ファイルを作成したら、その確 認は Windows パソコンの場合、 フロッピ−・ディスクにファイルを入れてあるとすれば、 ＷＷＷブラウザで a:\ とやれば出てくる。ＥＷＳであれば、% netscape . とすればカレ ントのディレクトリ指定となる。 プレ−ン・テキスト、HTML、JavaScript ならそのまま ＷＷＷブラウザに表示する。cgi-bin 下のプログラムの動作確認は、ＷＷＷサ−バが動い てないとダメである。 本節はおおむね「Internet Magazine」'95/10 月号、 "特集：ＣＯＯＬなホ−ムペ−ジの 作り方" を参考にした。ごく基本的な HTML の書き方だけを示した。もっと詳しく知りた ければ、"とほほのＷＷＷ入門" ＵＲＬなどを見られたい。ただ、以下のタグは HTML 4.0 でサポ−トされたスタイルシ−トに多くはとって変わっていくことになる。まあ、そう簡 単にはなくならないと思うが。なんせこれらのタグは使うのに簡単だし、それが故に爆発 的にＷＷＷは広まったのだから。 [ ロ−カル・ファイルのアクセス ] ブランク パソコンの円マ−ク ↓ ↓ Windows Internet Explorer -- C:\My Documents\KATOU\xxx.html Windows Netscape Navigator -- file:///C|/My Documents/KATOU/xxx.html INDY 等 Netscape Navigator -- file:/usr/local/katou ＷＷＷブラウザで出ているファイルをマウスでクリックした場合、ファイルの種類によっ てそのブラウザで表示されるか、エディタが開いて表示されるかは、拡張子とアプリケ− ションの対応表によって決まる。Netscape Navigator で xxx.txt ファイルがそのブラウ ザに表示されても、Internet Explorer ではワ−ドパッドが開くかも知れない。対応表は Windows パソコン内部や、Netscape の MIME 対応リストにある。 * 基本構造 始まり イントラネット管理 タイトル BGCOLOR は画面の背景色。 | この間に内容を書き込む。 終わり。 * 文字の強調とサイズ Intranet 少し太字。 は Bold。 もそう。 Intranet 斜め文字。 は Italic。、 もそう。 Intranet 斜めでアンダ−ラインつき。

Intranet

サイズ。
が一番小さい文字。 * 改行
ただの改行。

改行して１行あける。 * 罫線を入れる

画面一杯に罫線を表示する。
太さ 3 dot です。
CENTER でも "CENTER" でもいいみたい。 30% は画面幅の３０％で表示するということ。 * 書いた通りに表示して欲しい 
      　GIF や JPEG はブラウザ          文の前のブランクは有効。この通り表示されます。
        の中で絵が表示されます。

        PostScript は Netscape 
        では、Ghostscript ビュ
        −ワで表示できます。
* 文字の位置合わせ

こんにちわ

CENTER の他、LEFT と RIGHT もあり。 文字サイズを一番大きくして、色もつけて、画面

こんにちわ

右寄せで表示する。SIZE=1 が一番小さい。 色は "YELLOW" という指定も使える。 * 画像の表示 画像デ−タ 外部ビュ−ワで表示する。 画像を左端に表示する。デフォルト。 写真１ JPEG 画像。画像の名前を出しておく。 記述はこのように次の行にまたがってもいい。 図１ -------図１ TOP ALIGN はコメントを入れる | | 位置を意味する。複数行の | |図１ CENTER コメントはダメである。 | | -------図１ BOTTOM できるだけ と言うように、画像サイズを そのもので入れておこう。ホ−ムペ−ジのレイアウトをブラウザは最初に確保して表 示する。画像デ−タのダウンロ−ドを途中でやめても、ペ−ジのレイアウトは崩れな くなる。ペ−ジ表示も少し速くなるらしい。 * 文字や絵を真ん中にもってくる
こんにちわ 画面真ん中のつもり。

こんにちわ

----------------

| |

----------------

-------------図１ デフォルトは LEFT。 | | CENTER と RIGHT もあり。 図１ | |

------------- * 表の基本 BORDER は外枠の太さ。 無指定だと BORDER=0 と 解釈され、枠なしになる。この方法でコンテンツ の見栄えをよくすることが、テクニックとしてよ く使われる。 TH は太文字でセルの真ん中に入れる。 ---------------------------- | Ａ | Ｂ | Ｃ | |--------|--------|--------| | red |blue |green |
ＡＢＣ
redbulegreen
---------------------------- TABLE には BORDERCOLOR=YELLOW、BGCOLOR=GREEN、CELLPADDING=10、CELLSPACING=10、 BORDER=5、WIDTH="80%" も使える。 CELLSPACING は表の枠の太さ、BORDER は外枠の 太さである。WIDTH=100 とすると 100 dot になる。TD でも WIDTH、BGCOLOR 指定が できる。これらのタグをうまく使ってみてくれのいい画面を作ることになる。 * 表の中に絵もふくめる。 --------------------------- |手順 |内容 |---------|---------------- |ここに何 | ファイアウォ.. |か絵が入 | |いる | 電子メールア.. | | | | ネット管理 * 絵の横に文章を入れる−その１ ( Netscape でのみ有効 ) 
                               ---------
          |       |   よい子の
        よい子の                        |   絵  |イントラネット
    イントラネット
                  |       |
    でした                              |       |でした
--------- --------- | |よい子の よい子の
| 絵 |イントラネット イントラネット
| |でした でした
| |




---------
をともかく幾つか入れること。 Intranet

Intranet ALIGN=LEFT は必要。この ALIGN は本来 TOP,CENTER,BOTTOM のどれかであり、 図の コメントを１行入れるだけに用いられる。LEFT は Netscape の方言である。 * 絵の横に文章を入れる−その２ ＷＷＷブラウザ

__________________________________________
手順内容
--------------------------- 
       ファイアウォールのホスト         img.gif は絵でもいいし、Visio で描いたフロ−
       のログをチェックする。           チャ−トでもいい。絵の背景色が白の場合、表の
                                        ２段目の背景色も "#FFFFFF" で、 白にしておく
       電子メールアドレスの追加。       と見栄えがよくなる。
 の TOP 毎月最後の金曜日に行う。 は、セルの一番上から文字を入れる。VALIGNには TOP の他 CENTER,BOTTOM 指定もある。 ネット管理
｜ ｜ ｜ 四国遍路の道中記を掲載 ------------ ｜ ｜ している人のソ−スから、 | | ｜
図１
｜ 絵の横に文章を入れるエ | | ｜ 四国遍路の道中記を掲載している人 ｜ エッセンスを抜き出しま | | ｜ のソ−スから、絵の横に文章を入れ ｜ した。 | | ｜ るエッセンスを抜き出しました。 ｜ | | ｜

｜ 今四国遍路がトレンディ | | ｜ 今四国遍路がトレンディ ｜ ------------ ｜
｜ 図１ ｜ ブラウザのサイズを変えても、文字列がうまく流し込まれる。 BLOCKQUOTE 指定は画 面の左右に適当なマ−ジンをとってくれるので、見やすくなる。 とすると絵は左側にくる。
は一杯
を入れる代わりである。 * 項目を並べる
    オ−エル。
      は A,B,C となる。
    1. 会社紹介
        だと黒丸。
      • 新製品
      • と文字の間のブランクは無視される。
    ↓ 1. 会社紹介 2. 新製品 * リンクを付ける このブランクは無視される。 ↓ Link

    Link

    公式サ−バ−へ 

        詳細表示Ａ
         
    表示Ａ
    ↑ 見栄えを合わせたければ、ここ全角ブランクを入れる。 全角モ−ドでスペ−スをいれてもダメ！。 画像表示のリンク。下記ではブラウザには "gazou.gif" が表示される。 画像をクリ ックすると gazou_full.jpg が表示される。 BORDER=0 は入れて見栄えをよくしよう。 * 使える色について 次の１６色は初期のブラウザでも認識したはずである。 Maroon なんて色は指定したこと はないが。一応スタイルシ−トの CSS1 で定義されたとある。記述の際は大文字でも小文 字でも構わない。しかしこれら以外でも darkblue なんてのは使える。はて一体使える色 の名称はどれだけなのか。名称のないのは #FFFF99 というように１６進で指定する。 た だし Windows と Macintosh では同じ指定をしても色が違う場合があり、共通で使える色 というのがある。 Black, Silver, Gray, White, Maroon(赤茶色), Red, Purple, Fuchsia(明るい紫), Green, Lime(黄緑), Olive, Yellow, Navy(濃い青), Blue, Teal(青緑), Aqua(水色) * その他 注． ではありません。 2 上付き文字。 は下付き文字。 よかったらメ−ルで感想下さい

    作成 /システム課/ katou@nix.co.jj
    特殊文字：< は <、> は >、& は &、" は " とする。案外無視しているが。 HTML の文法チェックソフト weblint はいかが。初期の頃からあるフリ−ソフト。 (2) 図入り HTML 簡単作成方法 * 作成方法 本書は実際には、プリントしてからネットワ−ク図など、所々に後から手で矢印しなどを 描き込んでいる。それをＷＷＷブラウザでどうやって見せるかだいぶ考えていた。ネット ワ−ク図そのものをドロ−ソフトで描き直して、GIF に変換して使うか。Windows パソコ ンの Micrografx Designer か Visio で描く、INDY の Showcase で描く、 どっちにせよ かなり手間がかかるし、めんどうだしとためらっていた。そういえば Showcase でプレゼ ンテ−ション資料を前に作っていたなと思い出した。ASCII テキストで書いたネットワ− ク図は、そのままにして Showcase で矢印しなどだけ付け加えてもいいはずだと思いつい た。なぜ、今までもこのやり方を思い付かなかったのか。不覚！。 さてそうと決まったら、画像フォ−マットは何にするか。 といっても大方 GIF に決まっ ているのだが。パソコンでもＥＷＳでも別なビュ−ワで表示するというのはやめなければ ならない。図といえば少し前なら PostScript だった。 PostScript 使用の可能性を一応 見てみよう。PostScript はＷＷＷブラウザでインライン表示できない。また Windows パ ソコンには PostScript の外部ビュ−ワがない。あることはあるが、フリ−ソフトで別に インスト−ルしなければならない。ＥＷＳでも PostScript 表示は、Ghostscript を別途 インスト−ルしておく必要がある。それに PostScript はサイズがでかくなる。セキュリ ティ的に問題があるなど、結局 PostScript の使用はお勧めでない。 そうなると画像フォ−マットは GIF、JPEG、TIFF 辺りが候補になる。GIF は 256 色まで、 JPEG はもっと色数が多いがデ−タ量は多くなる。TIFF はかつては標準フォ−マット的な とこもあったが今ではあまり使われない。 そうなると、色数の少ない GIF がサイズ面か らも望ましい。もしカラ−が必要な時でも 256 色あれば、 クリアな写真画像でもなけれ ば十分である。さて作成手順である。Showcase に絵のつもりの ASCII 図を取り込み、矢 印しや文字を追加する。追加した文字は任意のサイズにできる。そして PostScript で吐 き出し、フリ−ソフトの ImageMagick で GIF に変換する。仕上げは plain-text のコン テンツだったのを、手作業で HTML にして終わり。大方 PRE を使えば、こりゃ簡単だ。 -------------------------------------------------------------------------------- 図はドロ−ソフトで描けばきれいだが手間である。簡単に図入りコンテンツを作成するに は、できるだけ ASCII テキストで書き、どうしても矢印しなど、 図でしか描けない部分 だけドロ−ソフト、INDY なら Showcase で追加する。それを GIF 変換して HTML で使う。 -------------------------------------------------------------------------------- 先ずテキストでネットワ−ク図など描く。temp.txt ↓ INDY の Showcase でとりこむ。矢印しなど図を追加する。 [挿入]→[テキスト]→[新パラグラフ] でテキストを読む。 ↓ Showcase から PostScript で出力する。 temp.ps ↓ INDY の ImageMagick で GIF に変換する。白枠周囲 20 をとる。 % convert -bordercolor white -border 20 temp.ps temp.gif ↓ 全体を HTML 化して終わり。 ---------------------------------- | |タイトルです | |
            |   |   文章
        |
    |

    << 図を画面の真ん中に配置し、 |
    Fig.1 図 << 図の下にコメントを付ける。 |

    |
            |   |  文章
        |
    | | * 各種画像フォ−マット ＷＷＷブラウザでインライン表示できるのは、９８年時点 GIF と JPEG である。 他の画 像フォ−マットは外部ビュ−ワに頼ることになる。 PostScript 系は画像コンバ−タを介 して GIF,JPEG に変換してコンテンツに用いるのが一般的である。 PostScript 系はデ− タ量が多く、スクリプト言語のため若干の危険性がある。 [ 画像デ−タ系 ] GIF( Graphics Interchange Format: xxx.gif ) ただ GIF といった場合 GIF87 形式をいう。 CompuServe GIF ともいわれていると思 う。GIF の色数は 256 色であり、HTML コンテンツのロゴなどでよく使われる。形式 は透明 GIF の GIF89、インタ−レ−ス GIF、アニメ−ション GIF がある。透明 GIF は ImageMagick の convert コマンドや Adobe Photoshop などで作成する。 JPEG( Joint Photographics Experts Group: xxx.jpg or jpeg ) GIF よりも色数が多く、写真画像などで使われる。 画像圧縮率も GIF より高かった ように記憶している。プログレッシブ JPEG というもある。 JPEG は圧縮すると元の デ−タには戻らない。何度も圧縮すると画像が荒れてくる。非可逆圧縮という。 TIFF( Tag Image File Format: xxx.tiff ) かつて Windows やＥＷＳで標準で使われていたイメ−ジファイル形式である。 現在 ではあまり使われないが、ＣＡＬＳでは標準フォ−マットになっているので注意され たい。それに TIFF はいろいろ方言があることも注意したい。可逆圧縮の画像デ−タ 形式である。何度セ−ブしても画像は荒れない。元のデ−タを保持している。 PICT( PICTure ) Macintosh での図形描画の基本機能、QuickDraw のコマンドを元に定められたイメ− ジファイル形式である。可逆圧縮。 [ PostScript 系 ] EPS( Encapsulated PostScript: xxx.eps ) PostScript に画像イメ−ジも含められるように拡張したフォ−マット。 PostScript のデ−タ互換フォ−マットとも言われる。画像イメ−ジは Macintoshではプレビュ− 画像と呼ばれている。Macintosh ならリソ−ス番号 256 の PICTリソ−スをイメ−ジ として使い、Windows やＥＷＳでなら TIFF を使う場合が多いらしい。ファイル形式 としては ASCII と binary がある。binary 形式はプリント出力する際にトラブルが 起きやすい。ちなみにプレビュ−画像はプリンタ出力時には無視される。 EPSI( Encapsulated PostScript Interchange format ) プレビュ−画像を %%Begin Preview: と %%End Preview の間に含める。EPSI は他コ ンピュ−タと簡単に共有できるように、 HEX(16 進数)のイメ−ジデ−タを ASCII 表 現したフォ−マットになっている。 EPSF( Encapsulated PostScript File ) EPS と同じ意味。EPS と言ってみたり EPSF と言ってみたりしている。 * 画像変換ソフト ImageMagick の使い方 使い方は至って簡単。何もせずに変換するなら convert コマンドで一発である。 ちょっ と見てくれを修正したいと思えば、display コマンドで表示させておき、マウスの左ボタ ンを押しているとメニュが出てくる。これでサイズの変更、画像強調、画像変換、マ−ジ ンの設定などだいたいのことはできる。 表示に際しては PostScript と EPS ファイルの 場合 bounding box の値は無視されて、実際の図の範囲一杯に表示される。convert コマ ンドは拡張子により、何とかフォ−マットを何とかフォ−マットに変換する。PostScript は xxx.ps、EPS は xxx.eps、GIF は xxx.gif という具合である。 display, convert コ マンドとも -help で対応フォ−マットとオプションが表示される。参考にして頂きたい。 ただ表示する。画面で修正、変換ができる。 GIF は xxx.gif、plain-text は xxx.text % display temp.ps と拡張子を付ける。 左右 100、上下 50 のふちどりをする。 % display -border 100x50 temp.ps 左右上下 20 のふちどりして、ふちどりの色を白にする。 % display -bordercolor white -border 20x20 temp.ps きれいなイメ−ジで、サイズをかえる。 % display -density 150x150 temp.ps サイズは大きくなるがイメ−ジは汚くなる。 % display -geometry 1000x500 temp.ps PostScript を GIF に変換する。オプションは display と同じ。 % convert temp.ps temp.gif Ｘウィンドウのイメ−ジをカットする。カットしたい Window をカ−ソルで指示する。 % import temp.gif * ImageMagick のインスト−ル ImageMagick は内部で Ghostscript を使っている。そのため ImageMagick を日本語対応 で使うには、Ghostscript を日本語対応にしておく必要がある。Ghostscript については "9-1. ＥＷＳの制御方法 (5)" も見られたい。インスト−ルが終わると /usr/local/bin/ に display, convert, montage, import, animate, mogrify, combine,segment と言うコ マンドが入っているはずである。本章で使うのは display と convert コマンドぐらいの ものであるが。 ただ、小生の INDY に入れた３年前ぐらい前のバ−ジョン 3.1 での話で ある。多分今でもそう変わっていないように思う。３年前のものでもちゃんと使えるし。 その時の README によれば、対応フォ−マットは３０ぐらいある。JPEG, TIFF, XPM は別 にフリ−ソフトをバインドすれば対応可能とある。 "This software is NOT shareware." とあり、ImageMagick はフリ−ソフトである。ただし、どんな人に使ってもらっているの か興味があるので、地元の絵葉書を送ってくれたらいいなと書かれている。よかったら送 ってあげて下さい。小生も出さないかんな−。下記は、９８年９月現在での配布ファイル である。ImageMagick-4.0.7.tar.gz が本体である。 インスト−ルは README を見て各自 やって下さい。Ghostscript も忘れずに。 % ftp ftp.iij.ad.jp ９８年９月現在での配布ファイル ftp> cd /pub/X/contrib/applications ftp> ls Image* -r--r--r-- 1 root wheel 2221376 .. ImageMagick-4.0.7.tar.gz -r--r--r-- 1 root wheel 8454 .. ImageMagick.README -r--r--r-- 1 root wheel 1821432 .. ImageMagick.animation.tar.gz << サンプル -r--r--r-- 1 root wheel 2700851 .. ImageMagick.images.tar.gz << の画像。 -r--r--r-- 1 root wheel 314 .. Readme.magick * 絵図でなくて写真は [ カメラの基礎知識：絞りと露出 ] もうかれこれ２０年以上前に Canon AE-1 という電子制御カメラを買った。マニュアルで も絞りやシャッタ−速度を調整できた。当時としてはなかなか優れものだったわけだ。し かしあまりカメラの仕組みについては勉強しないままできた。 今回 COOLPIX 950 に惚れ てしまったことから、少し理解したいと思った。絞りは Canon AE-1 をレンズ側から覗込 むと機械的に絞り羽根というのが、猫の目のように大きくなったり、小さくなったりする のが分かる。これで光の量を調整するのだ。露出というのがカメラの一番の決め手なのだ が、なかなか分かりにくい。絞りとシャッタ−速度で決まる画像の明るさが露出なのだが。 目を細めると、よく見える。ぼや−と近くのものを見ていると後ろのものはぼんやりとし か見えない。人の眼ではすぐ焦点が合ってしまうから、なかなかそのように認識できない が、カメラだと忠実にそのように写るわけである。慣れてくると絞りの値と焦点距離を見 れば、どの程度ボケを出せるか分かってくるそうだ。カメラ用語でいうと被写限深度とい い、焦点距離の前後でボケる範囲をいう。この性質を利用して雰囲気のあるポ−トレイト を撮影したりする。ホ−ムペ−ジでいえば背景をボカして、商品だけをクリアに撮影する のに使えるわけだ。バカチョンカメラやシャッタ−スピ−ド優先のカメラでは、できない 技である。 (目を開く) 開ける {絞り} 絞る (目を細める) 小 <---- F値 ----> 大 浅い {被写限深度} 深い 背景がぼける 背景もクリア (最大をパンフォ−カスという) [ カメラの基礎知識：露出補正 ] 撮影する範囲が、全体的に明るいと光量は十分あるなとカメラは判断し、絞りを絞って入 ってくる光の量を少なくする。そのような状態で撮影範囲に人物があると、人物にとって は光の量が少なくて、顔が暗く写ってしまうことになる。被者体がアンダ−で写るという のがこれである。逆はオ−バ気味という。アンダ−の場合、カメラが測光したのより、絞 りを開けて光が多く入って来るようにし、顔が明るく写るようにする。これが露出補正を プラスにする意味である。露出補正の範囲はだいたい ±2.0EV であり、 0.5EV か 1/3EV で調整するようになっている。+1 すると光の量は倍になる。-1 にすると光の量は半分に なり、露出が半分になるともいう。 被者体を明るくする − 露出プラスにする。 被者体を暗くする − 露出マイナスにする。 ん−、露出補正というのは結果的に分かるが、実際カメラがやるのは絞りの調整のはずだ。 そこのとこがどうも腑に落ちない。露出補正にはフィルム感度(デジカメは CCD 感度) を 変える方法もある。ISO 100 を 200 に上げれば感光しやすくなり、 暗い所でも写るよう になるのである。Canon AE-1 はアンダ−、 オ−バでどちらかは絞りによる補正ができな いので、反対ヘの調整はフィルム感度を変えてくれとあった。まあフィルムカメラはこれ でいいが、デジカメの場合 CCD 感度を上げていくと、 ノイズがのってきて画像が荒れて くるらしい。さらに別なやり方にシャッタ−速度の調整もある。速度を遅くすれば、感光 時間が長くなって暗いものでも写ってくるわけである。 感度の ISO 100 とか 400 は、高いほど暗いところでも写るようになる。 (3) ホ−ムペ−ジ作成の注意 '98/12 * ホ−ムペ−ジ作成ソフトを試す この手のソフトは使いものにならないのかと思っていたが、やっはり使いものにならない。 特にひどいのは Word の HTML 変換、Netscape Composer。いろいろ試してみたが、 全く 時間の無駄だった。プレゼンぐらいの画面を作る程度と思った方がいい。少しはましなの はデ−ビ−ソフトの HOTALL、ＩＢＭホ−ムペ−ジビルダ−である。 ただし、あくまでも 個人のホ−ムペ−ジを作る程度でしかない。HOTALL は試してみたので、 せっかくだから 少し紹介しておく。あまりたくさんのアイコン・メニュ−がないので、初心者でも使える。 ただし "(1)HTML の超基本" で取り上げたタグ程度のことしかできない。このソフトのう たい文句は高機能で高表現力ということだが、HTMLのタグをある程度覚えてしまえば、ガ シガシ書いた方が早いかも知れない。多分使い方として、おおまかにはアイコン・メニュ −で書き、このソフトの HTML 直接編集モ−ドに入って、細かに編集するのがいいのかも。 文字や背景の色を決めるにはいい。HTML に落したコ−ドも素直みたいである。 ※その後 HOTALL の方は消えた。ＩＢＭホ−ムペ−ジビルダ−は生き残り結構ビジネスの 場でも使われている。それでも決して使い易いとは小生思ってないが。`25/06 * ホ−ムペ−ジ作成のポイント コンテンツの作成の指針。特に外部用について述べたい。先ずあまり重たいのはダメ。印 刷物と同等に考えてはいけない。 ダイアルアップ接続のスピ−ドは 28.8 Kbps が現状だ いたい最低だが、実質 1 Kbps ぐらいでもなんとか見れるようにしたい。インタ−ネット に専用線接続していても、HTML ファイルのダウンロ−ド速度は、 数 Kbps しか出てない 場合が結構ある。そのため写真などの画像を多用したり、見栄えをよくするため
タグを乱用したりするのは避けたいところである。これらは、実質的な内容とは別に、コ ンテンツの表示を遅らせるだけで、お勧めでない。それに大した用もないのに Java を使 うのはやめた方がいい。表示がストップし、イライラさせられる。 写真を載せる場合の話。デジタルカメラやイメ−ジスキャナで写真を画像デ−タとして取 り込む。しかしそのままでは使えない。Photoshop や PhotoDeluxe 等で、 修正はどうし たって少しはやる必要がある。PhotoDeluxe でも概ね使用に耐える。写真を修正した後は、 できるだけ画像のファイルサイズを小さくする。デジタルカメラでとったままだと、１枚 だいたい 100 Kbyte 近い。それを解像度 72 dpi 程度の JPEGファイルに圧縮変換し、数 十キロバイト程度にしたい。 20 Kbyte 程度の写真画像でも結構きれいに見えるものであ る。最終的に１枚のコンテンツの容量を、ダイアルアップ接続でもストレスなく見れる程 度、約 50 Kbyte までに押えたい。 Photoshop 5.0J ---- 15.5 万円。プロ用。本はたくさん出ている。 PhotoDeluxe ---- パソコンのおまけソフトによく入っている。約１万２千円。 Paint Shop Pro ---- 1.5 万円。Windows 用のシェアウェア。 しかし、なかなか思ったような画面を表示させることができない。漢字フォントが基本的 に１つしかないのがいけない。見てくれのいい見出し文字にするには、どうしたってイメ −ジとして文字を作成するしかない。 HTML 4.0 でサポ−トされたスタイルシ−トのテク ニックを使えば、ある程度見てくれのいい文字が表示できるみたいだが。まだあまりブラ ウザがこなれていないようでもある。それに Internet Explorer と Netscape Navigator どちらでも同じように表示させることもやっかいである。どちらか一方でしか使えないタ グというのが結構ある。特に、細かな見れくれに関するタグがそうである。ともかく両方 のブラウザで表示して確認するしかない。 * ホ−ムペ−ジのアップロ−ドの注意 外部向けＷＷＷ用コンテンツの話である。 アップロ−ドには ftp を内部からＷＷＷホス トに向けてした方が安全かも知れない。 ＷＷＷホストで inetd デ−モンを手動で起動し、 すぐ内部ネットのパソコンやＥＷＳから ftp なり telnet をかける。 セッションが確立 したら inetd をすぐさま止めてしまう。この間、外部からＷＷＷホストに ftp アクセス などできてしまうが、inetd デ−モンの戸口が空いている時間は１分もない。手早くやれ ば１０秒ぐらいにできる。 ＷＷＷホストから内部ネットのコンピュ−タに ftp などする 方が危険だし、使い勝手も悪い。Windows 95/98 には ftpd がない。 内外のＷＷＷ用コンテンツを Windows パソコンで作成する場合の注意点など。 ＷＷＷサ −バがＥＷＳの場合、コンテンツのアップロ−ドは一般的に ftp を使う。 内用、イント ラネット用のコンテンツでは NFS という手もあるが、Windows の NFS ソフトを別途購入 しなければならない。Windows 95/98 ＯＳには、DOS 窓からの ftp が使える。 ただしこ の ftp は使いやすいとはお世辞にもいえない。何か挙動も少しおかしい。 それに未だに MS-DOS 時代の拡張子３文字、８文字の制限がある。GUI の FTP ソフトはＯＳには入って いない。 簡単なのは先の HOTALL などのソフトに添付する ftp を使うことである。 そうでなけれ ばシェアウェアの CuteFTP とか FTP Explorer あたりが、 雑誌のおまけ CD-ROM に入っ ているのでいいかと思う。フリ−ソフトも１つあげておく。松阪大学の先生のホ−ムペ− ジから FFFTP を紹介する。http://www2.biglobe.ne.jp/~sota/ にある。ftp を使う際の 注意点も述べておく。ＷＷＷホストに ftpd デ−モンを稼働させておくこと。それに ftp ロッグインのユ−ザとパスワ−ドを、ＷＷＷホストに登録しておくことである。 コンテンツ作成の漢字コ−ドはどうするか。ＷＷＷホストがＥＷＳの場合でも、コ−ドは シフト JIS でも JIS コ−ドでも構わない。もちろんＥＷＳ、すなわちＵＮＩＸの場合は EUC コ−ドがいいわけだが。もし Windows パソコンで EUC コ−ドで記述しようとするな ら、ＯＳ添付のエディタ WordPad ではダメである。 複数の漢字コ−ドに対応するシェア ウェアの "秀丸エディタ" 等を使うか、HOTALL など HTML ソフトを使うかである。 どう も Windows 95/98 には、漢字コ−ドの変換ソフトは入ってない。ないと困るよな−。 * HTML の正しい書き方 これからホ−ムペ−ジを作る人、または修正しようとする人は、漢字コ−ドをちゃんと指 定した方がいい。別になければなくてもまだそう問題はないが。最近のホ−ムペ−ジ作成 ソフトを使えば自動的につくとは思うが確認されたい。Windows パソコンで作成すると漢 字コ−ドはシフトＪＩＳで、ＥＷＳではＥＵＣである。 本文をＥＵＣで書いた場合は、下記で 'x-euc-jp' か 'EUC-JP' を、シフトＪＩＳで書い た場合は 'x-sjis' か 'SHIFT-JIS' を、ただのＪＩＳで書いた場合は 'ISO-2022-JP' を 指定すること。 というのは HTML 4.0 の規格（'97/12 制定）にそった記 述であるが、特に必要ない。将来の予約みたいなことである。 これはまだ特になくてもいい。 よい子のイントラネット | * 特殊記号 ＥＷＳでも Windows でも使える共通な特殊記号である。 これ以外を使うと表示されない 場合がある。Windows パソコンなんかにある丸に１とか(株)というのはＥＷＳにはコ−ド としてないので表示されない。空白になってしまうか化けるかである。つまり日本語では JIS X0208-1983 新ＪＩＳコ−ドの文字のみ使うということ。 ・｜―〜→←↑↓　、。，．：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝〜‖…‥‘’ “”（）〔〕［］｛｝〈〉《》「」『』【】＋−±× ＝≠＜＞≦≧∞∴♂♀°′ ″℃￥＄¢£％＃＆＊＠§☆★○●◎◇÷々〆〇ー‐／＼◆□■△▲▽▼※〒〓 ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεζηθικλμνξοπρστυφχψω АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ абвгдеёжзийклмнопрстуфхцчшщъыьэюя * 著作権表示 Copyright(C) 1996 Mr.Ikken Katou, All Rights Reserved. こんなんでいい。(C) は本当は丸に C で、Copyright を示している。ただの (C) でも著 作権を保持している印しとなる。1996 は著作権を示した最初の日付けである。 月日まで 入れてもいい。それに項目の順番に取り決めはない。国内の場合、特に著作権表示しなく ても、著作権はその人または法人に保持されているとみなされる。 (4) その他のテクニックなど '99/02 * スタイルシ−トを使う スタイルシ−トはホ−ムペ−ジ全体のみてくれを、一括して指定するのが基本的な考え方 である。HTML 本文とは別にスタイルシ−トのファイルを用意する。 この内容を変更する と、全体に反映される使い方が正当である。しかし、なかなかそのような使い方は難しい。 簡単には HTML 中にスタイルシ−トのタグを入れてしまう。このような使い方で、単純に 見栄えをよくするテクニックとして用いていいと思う。Microsoft と Netscape のブラウ ザでの表示の違いにへきへきさせられていたので、結構期待したのだが。ダメだ！。まだ だいぶおかしい。だましながらガシガシ書くしかないか。たまらん。 スタイルシ−トの別ファイルは CSS( Cascading Style Sheet ) という。 仕様は W3C に より９７年１２月に定められた HTML 4.0 に含まれている。更に今後、これまでのタグの 多くは廃止していくとしている。しかし、こう混乱していては廃止はそう簡単にはできな い。現状どんな有様か？。 「INTERNET magazine」'98/06, P.208〜209 "スタイルシ−ト CSS1 互換表" を見ると、Windows と Macintosh の IE3.x,4.x と NN3.x,4.x ４つで全て 問題なく使えるコマンドは無いに等しい。いわんやスタイルシ−ト以外のタグである。 [ 直接使う設定 ] ・文字列の間隔を設定する

明日天気になあれ
てるてる坊主

行間を空ける。100% で何も空けない。200% で１文字の高さ分空くことになる。 120% ぐらいの間隔が読み易いか。ポイント指定 pt、ドット指定 px もできる。 ------------------ |明日天気になあれ ＿ この間隔を空けたり、縮めたりする。 |てるてる坊主 ・文字サイズを設定する

abcd をやると、このタグの中では 10pt の方が優先する。その後、

XYZ

とするとちゃんと H1 のサイズになる。 その後いろいろやって、 STYLE 指定する場合は
か を使うとした方が いいと思う。へたに P やら A やら H1 やらを使うと訳が分からなくなる。 ・DIV と SPAN タグの違い First First
山口
山口
百恵
百恵 End End ↓ ↓ -------------- ------------------ |First |First山口百恵End |山口 |百恵 使い方：DIV でその文章のプロパティを設定して、一部文字列の |End プロパティを変えるのに SPAN を使うとよい。 ・文字列の部分だけの背景色を設定する
Mr. Ikken Katou
背景は黄色 文字は白 ↑ １個のブランクになる。 TABLE タグのテクニックを使わずに、文字列を囲む背景色を設定する。DIV タグでは Netscape Communicator 4.0 はちゃんと表示した。Internet Explorer 4.0 では背景 色が画面右端まで伸びて表示されてしまう。双方で同じように見せるには SPAN タグ を使い、山口
 というように改行指示した方がいいかも。 ・文字列の背景を大きくとる
かとう
-------------- | | 文字列を囲むのが padding、それを囲むのが border-width、 | かとう | その外が margin である。上のポイントは border-width が |黒 | 0 指定しないとこである。ちょっと変だけど。 -------------- ・他いろいろ allign :left | center,right << 文字列や画像の位置合わせ。 border-width :10px | medium,thick,thin << 飾り枠の周囲の幅。 margin-left :10px | 10pt << 画面左右の余白。-right もある。 margin :上 右 下 左 << 余白、全方向指定する。 margin :上下 左右 << ２つを同時に指定する。 border-xx-width, padding-xx, margin-xx で xx には top, right, bottom, left の幅ができる。ドット指定は 10px か 10、ポイント指定は 10pt のようにする。 [ 全体の見栄えの設定 ] ・全体に左マ−ジンを文字２つ分とる % 指定、px 指定も可。 ↓ margin-right:20pt もとると、
指定と同じようになる。 ・リンクのアンダ−ラインを消す | どこかへ飛べ * イメ−ジ・ロゴ 見出しをかっこよくするために、イメ−ジのロゴを置いたりする。ロゴはＩＢＭホ−ムペ −ジビルダ−や Photoshop なんかで作ることができる。 影のついた文字ロゴなんかを作 りたい訳である。PhotoDeluxe ではどうすればいいか分からなかった。ホ−ムペ−ジビル ダ−の方は何とかできた。ロゴを囲む背景色とペ−ジの背景色を同じにしておけば、ロゴ だけが見えてグッドなわけだ。それがすんなりとはいかない。何と微妙に色が違ってロゴ の背景色がうっすら見えてしまうのである。色は、256 色の RGB 指定か #99FFFF という ように指定している。ソフトによって出てくる色が違うのだ。まあ白か黒なら色が違うと いうことはないが。 ----------------------------- | ------------------ | | Welcom My Room | ロゴの背景色。#99FFFF | ------------------ | 全体の背景色 BGCOLOR は画面の背景色。 ぴったり色を合わせるには、例えばホ−ムペ−ジビルダ−なら、そこで背景色にしたパ− ツを作る。それを画像として保存する。大きなサイズはいらない。100 dot 四方ぐらいで いいか。 としてペ−ジの背景を、 この画像で埋めるので ある。これなら同じソフトから作った色なので、ばっちり合ってくれる。細かいことだけ ど、デザイン性を追及すると非常に気になるものである。 あるいはロゴの画像形式を透明 GIF の GIF89 にして、ロゴの背景色を透明にする。どう も透明にするという意味が分からなくてテクニックとして後先になってしまった。正確に は背景を透明にするのでなく、ある特定の色を指定して、その色を透明にしてしまう。つ まり無色にするのである。そうすると全体のバックの色がその部分に出るというわけであ る。ＩＢＭホ−ムペ−ジビルダ−なんかでは、透明にしたい色をマウスでヒットするよう になっている。ロゴはいいとしても、写真だと透明化するのはちょっと難しいだろうな。 * DynamicHTML とは JavaScript みたいな新しい技術かと思えば、そうではないみたいである。 動的なコンテ ンツを作るのに JavaScript や VBScript を使って記述することをいうらしい。紛らわし い用語だ。Netscape にはレイヤ−機能というのがあり、 それも使って動きのある画面が 作れるらしい。一応 DynamicHTML は、 Netscape と Microsoft のブラウザどちらもサポ −トするが、互換性はないと言ってよい。よい子では、見てくれをはでにするだけのため に JavaScript, VBScript, Java Applet などを用いることは推薦しない。JavaScript は Microsoft では JScript と呼びかえていることに注意されたい。 * プリント出力 ホ−ムペ−ジの背景色がカラ−プリンタで、出て来ないのにお気付きだろうか。カラ−プ リンタというのは、プリントしようとするのをそのままプリントするものだと思っていた。 プリンタがおかしいのか、Windows パソコンがおかしいのかだいぶ悩んでまった。９８年 初めに買った VAIO にインスト−ルされていた Netscape 4.01 がおかしいのか。 それで Netscape の 4.5 をインスト−ルしてみた。[ファイル] -> [ペ−ジ設定]のところに、何 とこのバ−ジョンでは "背景をプリントする" のチェック項目があるではないか。そこを チェックしたらちゃんと背景の色もでてきた。IE の方は前から背景色も出せたらしい。 しかし何とか背景色もプリントできるようになったものの、レイアウトが崩れているのだ。 何でブラウザに表示している通りをプリントしないのだ。Netscape の プリントのプレビ ュ−画面を見ると、もうここから崩れてしまっている。本当たまらんネ−。まあホ−ムペ −ジの印刷は、ハ−ドコピ−にするしかない。Alt + PrintScreen でアクティブな一番手 前のウィンドウを保存することができる。[編集]メニュ−の[貼り付け] で、Netscape な ら Netscape だけのところを Word などに取り込むことができる。 Windows 98 では画像 デ−タは BMP, JPEG, GIF で保存できるらしい。さて、これはどうやってやるの？。 * ディスプレイの文字サイズ 自分の作ったホ−ムペ−ジがマシンによって文字や画像の大きさが違って見える。漠然と 変だな−と思っていた。VAIO ノ−トの 12.1 inch と DOS/V の 15 inch のディスプレイ では同じ大きさなのだが、Gateway Solo の 13.3 inch ディスプレイで見ると画像が小さ くなっているのだ。それでレイアウトが崩れてしまっている。goo やフレッシュアイなど いつもこの Gateway Solo で見ているが別におかしいことはない。自分の HTML の書き方 が悪いのかと思っていた。分かりました。 Gateway Solo のデフォルトのフォントサイズ が大きめに設定されていたのだ。こんな設定があるとは思わなかった。 [画面のプロパティ]->[設定]->[詳細]->[全般] をクリックして行く。 ディスプレイの解 像度 1024x768 ピクセル、大きいフォント、125% 通常のサイズ(120dpi) と出ている。こ れを小さいフォント、通常のサイズ(96dpi) にする。再起動しますかと聞いてくるのでイ エス。こんなことでいちいちリブ−トさせるなよな。一応 Windows 98 でのことだが、NT だとどうかしゃん。画像については、もともと本来の解像度に合っている。文字が小さく なるのだ。13.3 inch のディスプレイだと字がこれでは、ちょっと小さいかな。 (5) 検索エンジンの利用 * アクセスを増やすには こんなように書いておくと、goo なんかのロボット・サイトの検索で始めの方に結果が来 るとのことである。本当かや？。一度試してみよう。でもなかなかロボットは巡回してこ ないようで、goo では２〜３ヵ月ぐらいかかっているのでないか。１ヵ月では変化してな いぞ。また、こうしたテクニックを用いたホ−ムペ−ジとそうでないペ−ジで不公平がで るためか、lycos などの検索サイトでは無視するようになってきた。これからは META は あまり期待できないかも。ともかくはでなネオンサインより、内容だよね。 しかしそうばかり言っておられない。似たような内容のサイトでも１日に百、かたや千と いうアクセスの違いが実際にはあるのだ。Yahoo に載ればかなりいいとされているが、ど うも本や雑誌で紹介されるのが一番アクセスが増えるようである。多分、感触として１０ 倍ぐらいの効果がある。内容に自信があれば自分で出版者に売り込むか。ちなみに、この "よい子のイントラネット" は９９年２月まで雑誌に紹介されたことは一度もない。 コン ピュ−タ関連の業者はほとんど知らない。Yahoo 全く見ていないのかな。というよりも多 分、ネ−ミングがいけない。よい子ではネ−。 [ 逆に減らす場合 ] goo などのロボットの検索対象から外す。 * Google の広告の利用 `24/12 Google アドワ−ズ広告、日本語版 2003/07/18開始。オ−クション型クリック課金、広告 型検索サ−ビスまたはＰＰＣ広告という。アドワ−ズ広告ともう一つ、プレミアム・スポ ンサ−シップ広告というのもある。検索結果の画面の一番上に必ず出してもらうという有 料サ−ビス。それで、小生がちょこっとめんどうみているインタ−ネット・ショップのこ と。最初 http://www.tcp-net.ad.jp/hogehoge で開いていたときには、 検索エンジンの 表示は最初の画面に出ていたのだが。他のプロバイダに変えてからちっとも出てこなくな った。クライアントの意向でそのプロバイダに含まれていたホ−ムペ−ジサ−ビスを使う ことにしたのだ。どうもそのプロバイダで検索エンジンのアクセスに対して、何らかの制 限をしているのでないのか。まあ、経費削減にもなるしということだったのだが。検索エ ンジンに引っかからないんではまるで売れない。それで Google アドワ−ズ広告を利用す ることにした。同業者はこれを利用して月商３００万円をはじきだしているとか。 利用の申込は "Google について"の画面をとりあえず出して、アドワ−ズ広告に入って行 う。Google の画面は至ってシンプルなので、 どこにそんな広告うんたらいう所があるの かと探してしまうが。検索用のキ−ワ−ドは、部分一致／完全一致／フレ−ズマッチ／除 外キ−ワ−ドとかややこしいことが書いてあるが、基本は普通に google を使うように何 とかの何とかを、幾つか登録してみればいい。CPC クリック単価、CTR クリック率という のもよく分からない。とりあえず１日の予算の上限を決めよう。小生は１日は百円として みた。１ヵ月最大でも３千円ということである。初期費用は５００円、それ以降の月はク リックされた分だけ、しかも１日百円までの上限。クリック単価は CPC や CRT 値で決め られるそうだが、最低の７円にした。まあ適当に設定したが結構広告は出ている。最初の 検索結果の画面に出ている。出てこなければ、いろいろ値を変えようかと考えてみた。そ れに実際、幾らの利用料になるのかやってみないことには怖い。 申込み画面は住所、氏名、電話番号など。それに支払いのクレジットカ−ドの番号に有効 期限などを入れる。無論この画面は httpsなので暗号化はされている。しかしクレジット カ−ドの番号を入れるというのはなかなか抵抗がある。クライアントの家にて、その場で も念を押して番号など入れたわけである。ところで初回月は初期費用の５００円とクリッ ク料で６００円ちょっと引き落とされていた。それから数ヶ月経って、それ以降の引き落 としがない。しかも検索画面に出てこなくなった。アドワ−ズ広告の管理画面にロッグイ ンしたらお金が引き落とされないので、表示を中止してます旨。再度クレジットカ−ドの 番号を入れ直してみたがダメ。よ−くカ−ドを見たら有効期限は月年になっていた。年月 だと思い込んでいた。有効期限のチェックは数字としてマッチングをしている。正しく入 力したら即、引き落としの手続きができ、検索画面にも出るようになった。 http://www.dostigres.com/google/、"目指せ！Google アドワ−道免許皆伝"。 > 本はこれ「免許皆伝 Google アドワ−ズ道場」1,575 円(税込) インプレス刊 2003/12。 http://www.venturenow.tv/feature/google > "実践！Google アドワ−ズ広告 緊急体験レポ−ト" * Google での検索表示の修正依頼 `25/06 知った http://www.google.co.jp/remove.html にペ−ジの削除やキャッシュの削除を依頼する。 だいぶ前の自分の書いた内容が表示されていたり、リンクが表示されていたりする場合が ある。Google の検索結果のデ−タが残っているため起こる。 いつまでも勝手に残ってい ては困ることもある。そういう場合は、ここで削除の依頼ができる。削除されるまでには 期間は通常６〜８週間かかる。ＷｅｂサイトのＵＲＬを変更する、Ｗｅｂサイトを削除す る、個々のペ−ジを削除する、スニッペを削除する、キャッシュペ−ジを削除する、古く なった無効なリンクを削除する、Google のイメ−ジ検索からのイメ−ジを削除する。 * Google の新検索アルゴリズム Google の新検索アルゴリズムであるハミングバ−ドというの。 ２０１３年１１月の初め 頃だったか日経の雑誌か Yahoo のサイトかでみた。 その頃、イントラネットで検索する と自分のが３ペ−ジ目にでていた。それからしばらくしてみたときは２ペ−ジ目。そして １２月そ日何と１番目のトップから２番目にでていた。トップは Wikipedia だった。 お お−、すごい。すごい。何年か前までは最初のペ−ジでも３番目ぐらいが最高で、最初の ペ−ジの尻の方だった。今回の検索結果をよくみると、自分のだけがポンと上になって他 のはそのまま相変わらずある。１２月８日に見たら２ペ−ジ目にあった。